<div flexLayout="row wrap" fxLayoutAlign="center">
  <div fxFlex="1 1 100%">
    <mat-tab-group mat-stretch-tabs="true" [selectedIndex]="selectedIndex">
      <mat-tab style="padding-top: 2em;" label="Login">
        <ng-template mat-tab-label>Login</ng-template>

        <mat-form-field (keydown.enter)="login()" class="example-full-width" style="text-align: left; width: 100%;">
          <input id="login-email" matInput placeholder="Email address" [formControl]="emailFormControl" [(ngModel)]="email">
          <mat-error *ngIf="emailFormControl.hasError('pattern')">
            Please enter a valid email address
          </mat-error>
        </mat-form-field>
        <mat-form-field (keydown.enter)="login()" class="example-full-width" style="text-align: left; width: 100%;">
          <input id="login-password" matInput placeholder="Password" [(ngModel)]="password" type="password" required>
          <mat-error *ngIf="!password">
            Password is empty
          </mat-error>
        </mat-form-field>
        <div align="center" style="padding-bottom: 1em">
          <a href="recover">Forgot password</a>
        </div>
        <div flexLayout="row wrap" align="center">
          <button id="login-submit" mat-raised-button color="primary" class="login" (click)="login()">LOGIN</button>
        </div>
      </mat-tab>

      <mat-tab label="Register">

        <mat-form-field (keydown.enter)="register()" class="example-full-width" style="text-align: left; width: 100%;">
          <input id="register-username" matInput placeholder="Username" [(ngModel)]="username" [formControl]="usernameFormControl"
            required>
          <mat-error *ngIf="!username">
            Username is empty
          </mat-error>
          <mat-error *ngIf="usernameFormControl.hasError('pattern')">
            Only lowercase and numerical characters (and dash as infix).
          </mat-error>
        </mat-form-field>

        <mat-form-field (keydown.enter)="register()" class="example-full-width" style="text-align: left; width: 100%;">
          <input id="register-email" matInput placeholder="Email address" [(ngModel)]="email" email pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,63}$"
            required>
          <mat-error>
            Invalid email address.
          </mat-error>
        </mat-form-field>

        <mat-form-field (keydown.enter)="register()" class="example-full-width" style="text-align: left; width: 100%;">
          <input id="register-password" matInput placeholder="Password" [(ngModel)]="password" type="password" required>
          <mat-error *ngIf="!password">
            Password is empty
          </mat-error>
        </mat-form-field>

        <mat-form-field (keydown.enter)="register()" class="example-full-width" style="text-align: left; width: 100%;">
          <input id="register-password-confirmation" matInput placeholder="Password confirm" [(ngModel)]="password_conf" type="password"
            required>
          <mat-error *ngIf="!password_conf">
            Password is empty
          </mat-error>
        </mat-form-field>

        <div flexLayout="row wrap" align="center">
          <button id="register-submit" mat-raised-button color="primary" class="register" (click)="register()">REGISTER</button>
        </div>
      </mat-tab>
    </mat-tab-group>
  </div>
</div>
